<template>
	<!-- 编辑资料 -->
	<view class="bigbox">
		<!-- 顶部的头像盒子 -->
		<view class="boxtop flex row-center col-center mt60"  @tap="upload()">
			<image :src="showImg" class="w190 h190 avatar bor-rad50" v-if='showImg'></image>
			<image :src="form.avatar" class="w190 h190 avatar bor-rad50" v-else></image>
		<!-- 	<image src="~@/static/img/my/my_avatar.png" class="w190 h190 avatar bor-rad50" v-else></image> -->
		</view>
		<!-- //顶部的头像盒子 -->

		<!-- 中间的banner盒子 -->
		<u-form :model="form" ref="uForm">
			<u-form-item label="昵称">
				<u-input v-model="form.username" inputAlign="right" placeholder="请输入昵称" />
				<u-icon name="arrow-right" size="26" color="#4D6080" class="ml24"></u-icon>
			</u-form-item>
			<u-form-item label="个人简介" label-position='top'>
				<u-input v-model="form.bio" type="textarea" :custom-style='customStyle' placeholder="请输入个人简介" />
			</u-form-item>
		</u-form>
		<!-- //中间的banner盒子 -->
		<view class="foot_fixed btn_bg color-fff" @tap="submit">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		name:'EditData',
		data() {
			return {
				form: {},
				customStyle: {
					backgroundColor: '#E1EDFA',
					borderRadius: '10rpx',
					paddingTop: '40rpx',
					paddingLeft: '40rpx',
				},
				showImg:'',
			};
		},
		onLoad() {
			// this.$user()
			this.form = uni.getStorageSync('userInfo');
			console.log('111',this.form)
		},
		methods:{
			upload() {
				this.$tool.upload().then(res => {
					console.log('222',res)
					this.showImg=res.showImg
					this.form.avatar = res.data.url;
				})
			},
			submit(){
				console.log(this.form)
				this.form.avatar=this.form.avatar.replace('http://www.zh-6.com','')
				this.$api.profile(this.form).then(res => {
					this.$msg(res.msg);
					if(res.code == 1){
						setTimeout(()=>{
							uni.navigateBack();
						}, 300)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: url('~@/static/img/my/7root-bg.png') no-repeat;
		background-size: 100% auto;
	}
	.foot_fixed{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;	
	}
	.btn_bg {
		color: #fffF;
		background:#1385FF;
		border-radius: 74rpx;
		height: 88rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 95% !important;
		margin-left: 2.5% !important;
		margin-bottom: 30rpx !important;
		
	}
	.bigbox {
		height: 100%;
	}
	.boxtop {
		position: relative;

		.avatar {}

		.camera {
			position: absolute;
			bottom: -5%;
		}
	}
</style>
